<template>
  <div class="singer-detail" v-loading="loading">
    <div class="singer-header" v-if="singerInfo">
      <div class="singer-avatar">
        <img
          :src="singerInfo.picUrl || '/img/default_singer.png'"
          :alt="singerInfo.name"
          @error="handleImageError"
        />
      </div>
      <div class="singer-basic-info">
        <h1>{{ singerInfo.name }}</h1>
        <p class="singer-brief">{{ singerInfo.briefDesc || '暂无简介' }}</p>
        <div class="singer-stats">
          <span>单曲: {{ singerSongs.length }}</span>
        </div>
        <el-button type="primary" @click="playAllSongs">播放全部</el-button>
      </div>
    </div>

    <div class="songs-section">
      <h2>热门歌曲</h2>
      <el-table
        :data="singerSongs"
        stripe
        style="width: 100%"
        @row-click="playSong"
      >
        <el-table-column type="index" label="#" width="60" />

        <el-table-column prop="name" label="歌曲名" min-width="200">
          <template #default="scope">
            <span class="song-name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="album" label="专辑" min-width="200" />

        <el-table-column prop="duration" label="时长" width="100">
          <template #default="scope">
            {{ formatDuration(scope.row.duration) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" icon="Play" circle @click.stop="playSong(scope.row)" />
            <el-button icon="Plus" circle @click.stop="addToPlaylist(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePlayerStore } from '@/store/player'
import { getSingerById, getSingerSongs } from '@/services/singer'
import { ElMessage } from 'element-plus'

export default {
  name: 'SingerDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const playerStore = usePlayerStore()

    // 数据状态
    const singerInfo = ref(null)
    const singerSongs = ref([])
    const loading = ref(false)

    // 获取歌手信息
    const fetchSingerInfo = async () => {
      try {
        loading.value = true
        const singerId = route.params.id

        // 获取歌手基本信息
        const singerResponse = await getSingerById(singerId)
        if (singerResponse.code === 200) {
          singerInfo.value = singerResponse.data
        } else {
          ElMessage.error(singerResponse.message || '获取歌手信息失败')
          router.push('/singers')
          return
        }

        // 获取歌手歌曲列表
        const songsResponse = await getSingerSongs(singerId)
        if (songsResponse.code === 200) {
          singerSongs.value = songsResponse.data || []
        } else {
          ElMessage.error(songsResponse.message || '获取歌手歌曲失败')
        }
      } catch (error) {
        ElMessage.error('获取信息失败: ' + error.message)
        router.push('/singers')
      } finally {
        loading.value = false
      }
    }

    // 播放歌曲
    const playSong = (song) => {
      playerStore.setCurrentSong(song)
      ElMessage.success(`正在播放: ${song.name}`)
    }

    // 添加到播放列表
    const addToPlaylist = (song) => {
      playerStore.addToPlaylist(song)
      ElMessage.success(`已添加到播放列表: ${song.name}`)
    }

    // 播放全部歌曲
    const playAllSongs = () => {
      if (singerSongs.value.length > 0) {
        playerStore.setPlaylist(singerSongs.value)
        playerStore.setCurrentSong(singerSongs.value[0])
        ElMessage.success('已开始播放歌手全部歌曲')
      } else {
        ElMessage.warning('该歌手暂无歌曲')
      }
    }

    // 格式化时长
    const formatDuration = (seconds) => {
      if (!seconds) return '0:00'
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${mins}:${secs.toString().padStart(2, '0')}`
    }

    // 处理图片加载错误
    const handleImageError = (e) => {
      e.target.src = '/img/default_singer.png'
    }

    // 初始化加载
    onMounted(() => {
      fetchSingerInfo()
    })

    return {
      singerInfo,
      singerSongs,
      loading,
      playSong,
      addToPlaylist,
      playAllSongs,
      formatDuration,
      handleImageError
    }
  }
}
</script>

<style scoped>
.singer-detail {
  padding: 20px;
}

.singer-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.singer-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.singer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.singer-basic-info {
  flex: 1;
}

.singer-basic-info h1 {
  margin: 0 0 15px 0;
  font-size: 32px;
  color: #333;
}

.singer-brief {
  margin: 0 0 20px 0;
  color: #666;
  line-height: 1.6;
}

.singer-stats {
  margin: 20px 0;
  color: #999;
}

.singer-stats span {
  margin-right: 20px;
}

.songs-section h2 {
  margin: 30px 0 20px 0;
  font-size: 24px;
  color: #333;
}

.song-name {
  font-weight: 500;
  cursor: pointer;
}

.song-name:hover {
  color: #409eff;
}
</style>
